<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <script src="./element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/write.css">
    <link rel="stylesheet" href="./editor.md-master/css/editormd.min.css">
    <script src="./js/jquery.js"></script>
    <script src="./editor.md-master/editormd.min.js"></script>
    <script src="./js/axios.js"></script>


</head>

<body>
<div id="app">
    <input type="hidden" id="userId" value="<%=session.getAttribute("userId")%>">
    <input type="hidden" id="draftId" value="<%=request.getParameter("draftId")%>">

    <input type="hidden" ref="userId" value="1">

    <el-container>
        <el-header direction="horizontal" style="height: 5vh;">
            <el-row>
                <el-col :span="20">
                    <el-input style type="text" placeholder="请输入标题" v-model="form.articleTitle" maxlength="50"
                              show-word-limit></el-input>
                </el-col>
                <el-col :span="2">
                    <el-button @click="dialogVisible = true">保存至草稿箱</el-button>
                </el-col>
                <el-col :span="1">
                    <el-button @click="dialogFormVisible = true">发布</el-button>
                </el-col>
                <el-col :span="1">
                    <el-avatar :src="circleUrl"></el-avatar>
                </el-col>
            </el-row>
        </el-header>
        <el-main style="height:95vh">
            <div id="editor">
                <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
                <textarea id="content"></textarea>
            </div>
        </el-main>
    </el-container>

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <span>将当前文章保存至草稿箱</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveToDraftBox">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog title="发布文章" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="文章名称" :label-width="formLabelWidth">
                <el-input placeholder="你还没输入文章标题" v-model="form.articleTitle"></el-input>
            </el-form-item>
            <el-form-item label="文章类别" :label-width="formLabelWidth">
                <el-select v-model="form.articleKind" placeholder="请选择文章类别">
                    <el-option v-for="item in articleKinds" :label="item.articleKind"
                               :value="item.articleKindId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文章标签" :label-width="formLabelWidth">
                <el-checkbox-group v-model="form.articleTag" :min="1" :max="5">
                    <el-checkbox v-for="item in articleTags" :label="item.articleTagId">{{item.articleTagName}}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>

        <div slot="footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false;publish()">确 定</el-button>
        </div>
    </el-dialog>
</div>

</body>
<script src="./js/write.js"></script>

</html>